<!--
 * @Descripttion: 根据类型查询相应规则
 * @version: 
 * @Author: 淏
 * @Date: 2023-11-23 21:24:05
 * @LastEditors: 淏
 * @LastEditTime: 2024-04-24 20:24:36
-->
<template>
  <div>
    <el-form ref="cleanForm" label-width="120px" class="demo-dynamic">
      <el-row :gutter="24">
        <el-col :span="23.8">
          <el-form-item label="规则">
            <span slot="label">
              <span class="text">规则</span>
            </span>
            <el-select
              ref="selectDate"
              v-model="value"
              size="mini"
              class="handle-select"
              placeholder="请选择处理规则"
              :popper-append-to-body="false"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.name"
                :value="item.name"
              ></el-option>
            </el-select>
            <el-tooltip
              class="button"
              content="删除该规则"
              placement="left-start"
            >
              <el-button
                size="mini"
                style="margin-left: 10px"
                type="danger"
                icon="el-icon-delete"
                circle
                plain
                @click="removeRules"
              ></el-button>
            </el-tooltip>
          </el-form-item>
        </el-col>

        <el-col :span="24" :offset="offset" v-if="chooseData.valueCount != 0">
          <el-form-item label="条件1">
            <span slot="label">
              <span class="text">条件1</span>
            </span>
            <div style="display: inline-flex" v-if="type == 'query'">
              <el-select
                size="mini"
                v-model="isV1Filed"
                placeholder="请选择"
                class="inputSelect"
                :popper-append-to-body="false"
              >
                <el-option label="值" value="否"></el-option>
                <el-option label="列" value="是"></el-option>
              </el-select>
              <el-input
                v-if="isV1Filed == '否'"
                size="mini"
                placeholder="请输入条件1"
                v-model="value1"
              ></el-input>
              <el-select
                v-else
                size="mini"
                v-model="value1"
                placeholder="选择列"
                class="handle-select mr10"
                :popper-append-to-body="false"
              >
                <el-option
                  v-for="(item, index) in columns"
                  :key="index"
                  :label="item.columnCnName"
                  :value="item.columnEnName"
                ></el-option>
              </el-select>
            </div>
            <div v-if="type == 'clean'">
              <el-input
                v-if="value != '日期格式化'"
                size="mini"
                v-model="value1"
                placeholder="请输入条件1"
              ></el-input>
              <selectDateRule
                style="padding: 0%"
                v-if="value == '日期格式化'"
                @getDataRule="getDataRule"
              ></selectDateRule>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="chooseData.valueCount == 2">
          <el-form-item label="条件2">
            <span slot="label">
              <span class="text">条件2</span>
            </span>
            <div style="display: inline-flex" v-if="type == 'query'">
              <el-select
                size="mini"
                v-model="isV2Filed"
                placeholder="请选择"
                class="inputSelect"
                :popper-append-to-body="false"
              >
                <el-option label="值" value="否"></el-option>
                <el-option label="列" value="是"></el-option>
              </el-select>
              <el-input
                v-if="isV2Filed == '否'"
                size="mini"
                v-model="value2"
              ></el-input>

              <el-select
                v-else
                size="mini"
                v-model="value2"
                placeholder="选择列"
                class="handle-select mr10"
                :popper-append-to-body="false"
              >
                <el-option
                  v-for="(item, index) in columns"
                  :key="index"
                  :label="item.columnCnName"
                  :value="item.columnEnName"
                ></el-option>
              </el-select>
            </div>
            <div v-if="type == 'clean'">
              <el-input
                size="mini"
                placeholder="请输入条件2"
                v-model="value2"
              ></el-input>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
  import selectDateRule from '@/components/select/selectDateRule.vue'
  import { query_rule } from '@/api/index.js'
  export default {
    // 组件名称
    name: 'selectAllRule',
    // 组件参数 接收来自父组件的数据
    props: {
      type: {
        type: String,
        required: true,
      },
      columns: {
        type: Array,
        required: true,
      },
    },
    // 局部注册的组件
    components: { selectDateRule },
    // 组件状态值
    data() {
      return {
        options: [],
        value: '',
        value1: '',
        value2: '',
        chooseData: {
          name: '',
          type: '',
          valueCount: 0,
        },
        offset: 0,
        isV1Filed: '否',
        isV2Filed: '否',
      }
    },
    // 计算属性
    computed: {},
    // 侦听器
    watch: {
      value(value) {
        this.findData(value)
      },
      value1(value) {
        let value1s = {
          value1: value,
          isV1Filed: this.isV1Filed,
        }
        this.$emit('getValue1', value1s)
      },
      value2(value) {
        let value2s = {
          value2: value,
          isV2Filed: this.isV2Filed,
        }
        this.$emit('getValue2', value2s)
      },
      chooseData(value) {
        if (value.valueCount == 2) {
          this.offset = 0
        } else {
          this.offset = 0
        }
      },
    },
    // 组件方法
    methods: {
      getData() {
        let params = new URLSearchParams()
        let type = this.type
        params.append('type', type)
        query_rule(params).then((res) => {
          this.options = res.data
        })
      },
      findData(row) {
        this.chooseData = this.options.find((item) => {
          return item.name == row
        })
        this.$emit('getAllRule', this.chooseData)
      },
      getDataRule(row) {
        this.value1 = row.code
      },
      removeRules() {
        this.$emit('removeRules')
      },
      clearData() {
        this.options = []
        this.value = ''
        this.value1 = ''
        this.value2 = ''
        this.chooseData = {
          name: '',
          type: '',
          valueCount: 0,
        }
        this.offset = 0
        this.isV1Filed = '否'
        this.isV2Filed = '否'
      },
    },
    created() {},
    mounted() {
      this.getData()
    },
  }
</script>

<style lang="less" scoped>
  .el-input {
    width: 200px;
  }
  .inputSelect {
    width: 70px;
    background: transparent !important;
    color: #00ffff !important;
  }
  .text {
    color: #00ffff;
    font-weight: 500;
  }
  .handle-select {
    width: 200px;
  }
  /deep/.el-input-group__prepend {
    background-color: #01244e78 !important;
  }
</style>
<style scoped>
  .button {
    background: rgba(0, 0, 255, 0.2);
    border-radius: 10px;
    border: 1px solid #295a85;
    color: #00ffff;
    text-shadow: 0 0 25px #00ffff;
    font-weight: 700;
  }
  .text {
    color: #00ffff;
    font-weight: 500;
  }
  .cleatCard {
    background: rgba(48, 89, 224, 0.3);
    border: 1px solid #295a85;
    overflow: auto; /* 自动开启滚动条 */
    height: calc(100vh - 280px); /* 设置最大高度 */
  }
</style>
